<template>
  <div>
    <div id="cesiumContainer">
      <!-- <CesiumViewer v-if="viewer" :viewer="viewer"></CesiumViewer> -->
    </div>
    <div id="credit"/>
  </div>
</template>
<script>

// import buildModuleUrl from 'cesium/Cesium/'
import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
import { clearInterval } from 'timers'
import { wgs84togcj02 } from '@/utils/transform'
import CesiumNavigation from 'cesium-navigation-es6'
import CesiumLocal from './CesiumLocal'

export default {
  name: 'CesiumMap',
  // components:{CesiumViewer},
  data () {
    return {
      mapViewer: null,
      mapGeoJson: {
        'type': 'FeatureCollection',
        'features': []
      },
      hightLighted: null,
      homePosition: [114.1, 22.55]

    }
  },
  watch: {
    hightLighted (newValue, oldValue) {
      if (oldValue) {
        const entity = this.findEntity(oldValue)
        if (entity) {
          this.hightlightCommon(entity, false)
          this.mapViewer.scene.requestRender()
        }
      }
      if (newValue) {
        const entity = this.findEntity(newValue)
        if (entity) {
          this.hightlightCommon(entity, true)
          this.fly(entity)
          this.mapViewer.scene.requestRender()
          // console.log(this.mapViewer)
        }
      }
    }
  },
  mounted () {
    const gmapstatellite = new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={TileCol}&y={TileRow}&z={TileMatrix}',
      layer: 'USGSShadedReliefOnly',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'gmapstatellite',
      // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      maximumLevel: 18,
      credit: new Cesium.Credit('U. S. Geological Survey')
    })
    const gmapstatelliteAnntation = new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={TileCol}&y={TileRow}&z={TileMatrix}',
      layer: 'USGSShadedReliefOnly',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'gmapstatellite_anntation',
      // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      maximumLevel: 18,
      credit: new Cesium.Credit('U. S. Geological Survey')
    })
    //
    const tdtstatellite = new Cesium.WebMapTileServiceImageryProvider({

      url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&X={TileCol}&Y={TileRow}&L={TileMatrix}&tk=aab502e1bb9286bddef5f3cc7ade3835',
      layer: 'USGSShadedReliefOnly1',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'tdtstatellite',
      // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      maximumLevel: 18,
      // subdomains : ['t0','t1','t2','t3','t4','t5','t6','t7'],
      credit: new Cesium.Credit('U. S. Geological Survey')
    })
    const tdtstatelliteAnntation = new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.gov.cn/DataServer?T=cia_w&X={TileCol}&Y={TileRow}&L={TileMatrix}&tk=aab502e1bb9286bddef5f3cc7ade3835',
      layer: 'USGSShadedReliefOnly2',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'tdtstatellite_anntation',
      // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
      maximumLevel: 18,
      // subdomains : ['t0','t1','t2','t3','t4','t5','t6','t7'],
      credit: new Cesium.Credit('U. S. Geological Survey')
    })

    // var shadedRelief2 = new Cesium.WebMapTileServiceImageryProvider({
    //   url: 'http://localhost/sztms/{TileMatrix}/{TileRow}/{TileCol}.jpg',
    //   // layer: 'USGSShadedReliefOnly',
    //   // style: 'default',
    //   format: 'image/jpg',
    //   // tileMatrixSetID: 'default028mm',
    //   maximumLevel: 18,
    //   credit: new Cesium.Credit({ text: 'U. S. Geological Survey' })
    // })

    // // Using custom tags in your template url.
    var gtmsLoacal = new Cesium.UrlTemplateImageryProvider({
      url: 'http://183.194.241.67/sztms/{z}/{x}/{reverseY}.jpg',
      tilingScheme: new Cesium.GeographicTilingScheme(),
      minimumLevel: 1,
      maximumLevel: 18,
      rectangle: new Cesium.Rectangle(
        Cesium.Math.toRadians(113.672570703),
        Cesium.Math.toRadians(22.240822817),
        Cesium.Math.toRadians(114.647224877),
        Cesium.Math.toRadians(22.853931430))
    })
    const viewer = new Cesium.Viewer('cesiumContainer', {
      homeButton: false,
      baseLayerPicker: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
      creditContainer: 'credit',
      targetFrameRate: 25,
      vrButton: true,
      requestRenderMode: true,
      selectionIndicator: false,
      // sceneMode: Cesium.SceneMode.SCENE2D,
      // terrainProvider : new Cesium.CesiumTerrainProvider({
      //     url: 'static/tiles',
      //     requestVertexNormals : true
      // }),
      // terrainProvider: Cesium.createWorldTerrain(),
      terrainProvider: new Cesium.CesiumTerrainProvider({
        url: 'http://115.28.183.152:8080/cesium/tiles',
        requestVertexNormals: true
      }),
      imageryProvider: gmapstatellite,
      // 设置墨卡托投影
      mapProjection: new Cesium.WebMercatorProjection()
    })

    // var layers = viewer.imageryLayers

    this._local = new CesiumLocal(viewer)
    // const scene = viewer.scene
    viewer.scene.globe.depthTestAgainstTerrain = false

    var options = {}
    // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
    options.defaultResetView = Cesium.Cartographic.fromDegrees(114.1, 22.55, 100000)
    // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
    options.enableCompass = true
    // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
    options.enableZoomControls = true
    // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
    options.enableDistanceLegend = true
    // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
    options.enableCompassOuterRing = true
    CesiumNavigation(viewer, options)

    // 删除哥伦布视图
    const container = viewer.sceneModePicker.container
    let sceneModeButton = container.getElementsByClassName('cesium-sceneModePicker-wrapper cesium-toolbar-button')
    if (sceneModeButton.length > 0) {
      sceneModeButton = sceneModeButton[0]
      sceneModeButton.removeChild(sceneModeButton.lastElementChild)
    }

    // var providerShenzhen_spot3 = new Cesium.WebMapTileServiceImageryProvider({
    //   url: 'http://183.194.241.67/geoserver/gwc/service/wmts',
    //   layer: 'shenzhen:sz',
    //   // style: 'default',
    //   format: 'image/png',
    //   tileMatrixSetID: 'EPSG:4326',
    //   minimumLevel: 10,
    //   maximumLevel: 19,
    //   ellipsoid: Cesium.Ellipsoid.WGS84,
    //   credit: new Cesium.Credit({ text: 'U. S. Geological Survey' })
    // })
    // var providerShenzhen_spot3 = new Cesium.WebMapServiceImageryProvider({
    //   url: 'http://203.95.5.102/arcgis/services/basicdata/spotWebMercator/MapServer/WMSServer?f=jsapi',
    //   layers: 'SPOTIMG_250_rs_201700000000.tif',
    //   parameters: {
    //     service: 'WMTS',
    //     format: 'image/png',
    //     transparent: true,
    //     BGCOLOR: '#FEFFFF',
    //     version: '1.1.1',
    //     tiled: true
    //   },
    //   srs: 'EPSG:3857'
    //   // proxy: new Cesium.DefaultProxy('/proxy/')
    // })
    // var layers = viewer.imageryLayers
    // var blackMarble = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
    //   url: 'http://localhost/sztms',
    //   credit: '北京市昌平区',
    //   flipXY: false,
    //   fileExtension: 'jpg',
    //   maximumLevel: 18,
    //   rectangle: new Cesium.Rectangle(
    //     Cesium.Math.toRadians(113.67257070268499320),
    //     Cesium.Math.toRadians(22.2408228174083007),
    //     Cesium.Math.toRadians(114.6472248768630067),
    //     Cesium.Math.toRadians(22.8539314301034011))
    // }))

    // 113.6725707026849932,22.2408228174083007 : 114.6472248768630067,22.8539314301034011

    // var providerShenzhen_spot3 = new Cesium.ArcGisMapServerImageryProvider({
    //   url: 'http://203.95.5.102/arcgis/rest/services/basicdata/spotWebMercator/MapServer',
    //   layers: 'SPOTIMG_250_rs_201700000000.tif',
    //   tileDiscardPolicy: new Cesium.DiscardMissingTileImagePolicy(
    //     {
    //       disableCheckIfAllPixelsAreTransparent: false,
    //       missingImageUrl: 'static/missing.png',
    //       pixelsToCheck: false
    //     }),
    //   maximumLevel: 19,
    //   rectangle: new Cesium.Rectangle(
    //     Cesium.Math.toRadians(113.67257070268499320),
    //     Cesium.Math.toRadians(22.2408228174083007),
    //     Cesium.Math.toRadians(114.6472248768630067),
    //     Cesium.Math.toRadians(22.8539314301034011))
    //   // // srs: 'EPSG:4326',
    //   // usePreCachedTilesIfAvailable: true,
    //   // tilingScheme: new Cesium.WebMercatorTilingScheme(),
    //   // ellipsoid: Cesium.Ellipsoid.WGS84,
    //   // enablePickFeatures: false
    // })

    viewer.imageryLayers.addImageryProvider(gtmsLoacal)
    viewer.imageryLayers.addImageryProvider(tdtstatelliteAnntation)
    viewer._cesiumWidget._creditContainer.style.display = 'none'
    // 去掉飞的效果
    viewer.sceneModePicker.viewModel.duration = 0.0
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(this.homePosition[0], this.homePosition[1], 100000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
      }
    })

    viewer.camera.changed.addEventListener(
      function () {
        if (viewer.camera._suspendTerrainAdjustment && viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
          viewer.camera._suspendTerrainAdjustment = false
          viewer.camera._adjustHeightForTerrain()
        }
      }
    )
    this.mapViewer = viewer
    this.mapViewer.screenSpaceEventHandler.setInputAction((movement) => {
      const pickedFeature = viewer.scene.pick(movement.position)

      if (pickedFeature && pickedFeature.id) {
        this.hightlight(pickedFeature)
        // 当在地图上点击会触发data-click事件，引用该组件的只需要添加处理方法即可
        if (pickedFeature.id.properties) { this.$emit('data-click', pickedFeature.id.properties) }
      } else {
        this.hightlight(null)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  },
  methods: {
    // 地图控件的初始化数据
    initData (layer, flyTo) {
      if (flyTo === null || flyTo === undefined) {
        flyTo = true
      }
      if (this.hightLighted) {
        this.hightLighted = null
      }
      const data = JSON.parse(JSON.stringify(layer))
      if (data.features && data.features.length > 0) {
        for (let j = 0; j < data.features.length; j++) {
          if (data.features[j].geometry.type === 'LineString') {
            for (let i = 0; i < data.features[j].geometry.coordinates.length; i++) {
              // const c = data.features[j].geometry.coordinates[i]
              // data.features[j].geometry.coordinates[i] = wgs84togcj02(c[0], c[1])
            }
          } else if (data.features[j].geometry.type === 'Point') {
            // const c = data.features[j].geometry.coordinates
            // data.features[j].geometry.coordinates = wgs84togcj02(c[0], c[1])
          }
        }
      }
      this.mapGeoJson = data
      this.loadLayer(flyTo)
      this.$nextTick(() => {
        this.$emit('init-data', this.mapGeoJson)
      })
    },

    select: function (id) {
      this.hightLighted = id
    },
    GetViewExtent: function (viewer) {
      var extent = {}
      var scene = viewer.scene
      var ellipsoid = scene.globe.ellipsoid
      var canvas = scene.canvas
      var car3_lt = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, 0), ellipsoid)// canvas左上角
      var car3_rb = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(canvas.width, canvas.height), ellipsoid) // canvas右下角
      // 当canvas左上角和右下角全部在椭球体上
      if (car3_lt && car3_rb) {
        var carto_lt = ellipsoid.cartesianToCartographic(car3_lt)
        var carto_rb = ellipsoid.cartesianToCartographic(car3_rb)
        extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude)
        extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude)
        extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude)
        extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude)
      } else if (!car3_lt && car3_rb) { // 当canvas左上角不在但右下角在椭球体上
        var car3_lt2 = null
        var yIndex = 0
        var xIndex = 0
        do {
          // 这里每次10像素递加，一是10像素相差不大，二是为了提高程序运行效率
          yIndex <= canvas.height ? yIndex += 10 : canvas.height
          xIndex <= canvas.width ? xIndex += 10 : canvas.width
          car3_lt2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(xIndex, yIndex), ellipsoid)
        } while (!car3_lt2)
        var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2)
        var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb)
        extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude)
        extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude)
        extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude)
        extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude)
      } else if (car3_lt && !car3_rb) { // 当canvas左上角在但右下角不在椭球体上
        var car3_rb2 = null
        var yIndex = canvas.height
        var xIndex = canvas.width
        do {
          // 这里每次10像素递加，一是10像素相差不大，二是为了提高程序运行效率
          yIndex >= 10 ? yIndex -= 10 : 10
          xIndex >= 10 ? xIndex -= 10 : 10
          car3_rb2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(yIndex, yIndex), ellipsoid)
        } while (!car3_rb2)
        var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt)
        var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb2)
        extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude)
        extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude)
        extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude)
        extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude)
      } else if (!car3_lt && !car3_rb) {
        var car3_lt2 = null
        var yIndex = 0
        var xIndex = 0
        do {
          // 这里每次10像素递加，一是10像素相差不大，二是为了提高程序运行效率
          yIndex <= canvas.height ? yIndex += 10 : canvas.height
          xIndex <= canvas.width ? xIndex += 10 : canvas.width
          car3_lt2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(xIndex, yIndex), ellipsoid)
        } while (!car3_lt2)
        var car3_rb2 = null
        var yIndex = canvas.height
        var xIndex = canvas.width
        do {
          // 这里每次10像素递加，一是10像素相差不大，二是为了提高程序运行效率
          yIndex >= 10 ? yIndex -= 10 : 10
          xIndex >= 10 ? xIndex -= 10 : 10
          car3_rb2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(yIndex, yIndex), ellipsoid)
        } while (!car3_rb2)
        var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2)
        var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb2)
        extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude)
        extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude)
        extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude)
        extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude)
      }
      // 获取高度
      extent.height = Math.ceil(viewer.camera.positionCartographic.height)
      return extent
    },
    GetMapCenter: function () {
      var result = this.mapViewer.camera.pickEllipsoid(new Cesium.Cartesian2(this.mapViewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2))
      if (result) { } else { return null }
      var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result)
      var lon = curPosition.longitude * 180 / Math.PI
      var lat = curPosition.latitude * 180 / Math.PI
      var height = this.mapViewer.camera.positionCartographic.height
      return {
        lon: lon,
        lat: lat,
        height: height
      }
    },
    PointInExtent: function (lat, lon, extent) {
      if (lat < extent.ymin) { return false }
      if (lat > extent.ymax) { return false }
      if (lon < extent.xmin) return false
      if (lon > extent.xmax) return false
      return true
    },
    fly: function (entity) {
      console.log('before..zoom')
      console.log(this.mapViewer.camera.positionCartographic.height)
      var extent = this.GetViewExtent(this.mapViewer)

      var points
      var x = 0
      var y = 0
      var z = 0
      // console.log(this.mapViewer.scene)
      var ellipsoid = this.mapViewer.scene.globe.ellipsoid
      var cartesian3, cartographic, lat, lng
      if (entity.geotype === 'intrestedpoint') {
        cartesian3 = entity.position._value
        cartographic = ellipsoid.cartesianToCartographic(cartesian3)
        lat = Cesium.Math.toDegrees(cartographic.latitude)
        lng = Cesium.Math.toDegrees(cartographic.longitude)
        if (this.mapViewer.camera.positionCartographic.height > 1000 || this.PointInExtent(lat, lng, extent) === false) {
          this.mapViewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(lng, lat, 999.0)
          })
        }
      } else if (entity.geotype === 'trackline') {
        points = entity.polyline.positions.getValue()
        x = 0
        y = 0
        z = 0
        // 求平均
        for (var i in points) {
          x = x + points[i].x
          y = y + points[i].y
          z = z + points[i].z
        }
        x = x / points.length
        y = y / points.length
        z = z / points.length
        cartesian3 = new Cesium.Cartesian3(x, y, z)
        cartographic = ellipsoid.cartesianToCartographic(cartesian3)
        lat = Cesium.Math.toDegrees(cartographic.latitude)
        lng = Cesium.Math.toDegrees(cartographic.longitude)
        if (this.mapViewer.camera.positionCartographic.height > 1000 || this.PointInExtent(lat, lng, extent) === false) {
          this.mapViewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(lng, lat, 999.0)
          })
        }
      } else {
        if (entity.polygon) {
          points = entity.polygon.positions.getValue()
          x = 0
          y = 0
          z = 0
          // 求平均
          for (var i in points) {
            x = x + points[i].x
            y = y + points[i].y
            z = z + points[i].z
          }
          x = x / points.length
          y = y / points.length
          z = z / points.length
          cartesian3 = new Cesium.Cartesian3(x, y, z)
          cartographic = ellipsoid.cartesianToCartographic(cartesian3)
          lat = Cesium.Math.toDegrees(cartographic.latitude)
          lng = Cesium.Math.toDegrees(cartographic.longitude)
          if (this.mapViewer.camera.positionCartographic.height > 1000 || this.PointInExtent(lat, lng, extent) === false) {
            this.mapViewer.camera.flyTo({
              destination: Cesium.Cartesian3.fromDegrees(lng, lat, 999.0)
            })
          }
        }
        // this.mapViewer.flyTo(entity, { maximumHeight: 1 })
      }
      console.log('after..zoom')
      console.log(this.mapViewer.camera.positionCartographic.height)
    },
    hightlight: function (clickedEntity) {
      // 高亮
      if (clickedEntity == null) {
        this.hightLighted = null
      } else {
        if (clickedEntity.id && clickedEntity.id.properties) {
          if (clickedEntity.id.properties.id) {
            const clickedid = clickedEntity.id.properties.id.getValue()
            this.hightLighted = clickedid
          }
        }
      }
    },

    // find an entity
    findEntity (id) {
      const entites = this.mapViewer.dataSources._dataSources[0].entities.values
      for (var i = 0; i < entites.length; i++) {
        if (entites[i].properties.id) {
          if (entites[i].properties.id.getValue() === id) {
            return entites[i]
          }
        }
      }
    },
    // highlight method
    hightlightCommon (entity, hight) {
      let linewidth = 1.5
      let color = Cesium.Color.CORNFLOWERBLUE
      let pixelSize = 16
      if (hight) {
        linewidth = 3
        color = Cesium.Color.YELLOW
        pixelSize = 26
      }
      if (!entity) { return }
      if (entity.geotype === 'trackline') {
        entity.polyline.width = linewidth
        // entity.polyline.material = new Cesium.PolylineGlowMaterialProperty({
        //   glowPower: 0.1, // 一个数字属性，指定发光强度，占总线宽的百分比。
        //   color: Cesium.Color.ORANGERED.withAlpha(0.9)
        // })
      } else {
        // entity.billboard.color = color
        entity.point.color = color
        entity.point.pixelSize = pixelSize
      }
      // refresh map
      this.mapViewer.scene.requestRender()
    },
    loadLayer (flyTo) {
      if (this.mapViewer.dataSources != null) {
        console.log(this.mapViewer.dataSources)
        this.mapViewer.dataSources.removeAll()
      }

      const geojosndata = this.mapGeoJson
      // 加载json数据，组织成Geojson格式
      //
      const that = this
      // const pinBuilder = new Cesium.PinBuilder()
      // const cameralPin = Cesium.when(pinBuilder.fromColor(Cesium.Color.CORNFLOWERBLUE, 48), function (canvas) {
      //   const g = canvas.toDataURL()
      const promise = Cesium.GeoJsonDataSource.load(geojosndata, { clampToGround: true }) // 显示管线数据  直接加载json数据 比把json转化成czml在加载 快很多
      promise.then((dataSource) => {
        that.mapViewer.dataSources.add(dataSource)
        const entities = dataSource.entities.values

        for (let o = 0; o < entities.length; o++) {
          const r = entities[o]
          // console.log(r)
          if (r.properties && r.properties.id) {
            r.nameID = r.properties.id.getValue() // 给每条线添加一个编号，方便之后对线修改样式
          }
          if (r.polyline) {
            // 说明是线
            r.polyline.width = 1.5 // 添加默认样式
            r.geotype = 'trackline'
            // r.polyline.material = new Cesium.PolylineGlowMaterialProperty({
            //   glowPower: 0.1, // 一个数字属性，指定发光强度，占总线宽的百分比。
            //   color: Cesium.Color.ORANGERED.withAlpha(0.9)
            // })
          } else if (r.polygon) {
            r.geotype = 'roof'
            r.polygon.outline = false

            r.polygon.material = Cesium.Color.DARKGREY
            r.polygon.extrudedHeight = r.properties.BLDG_HEIGH.getValue()
          } else {
            // 设置地理类型
            r.geotype = 'intrestedpoint'
            r.billboard = undefined

            if (r.properties) {
              let txtLabel = null
              if (r.properties.label) {
                txtLabel = r.properties.label.getValue()
              }

              r.point = {
                pixelSize: 16,
                color: Cesium.Color.CORNFLOWERBLUE,
                // outlineColor: Cesium.Color.BLUE,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance: 0,
                outlineWidth: 0
              }
              if (txtLabel) {
                // Cesium.when(pinBuilder.fromText(txtLabel, Cesium.Color.CORNFLOWERBLUE, 70), function (canvasText) {
                //   r.billboard = {
                //     image: canvasText.toDataURL(),
                //     color: Cesium.Color.CORNFLOWERBLUE,
                //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                //   }
                // })

                r.label = {
                  text: txtLabel,
                  font: '16pt Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
                  fillColor: Cesium.Color.GOLD,
                  style: Cesium.LabelStyle.FILL,
                  backgroundColor: Cesium.Color.CORNFLOWERBLUE,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  outlineWidth: 2,
                  outlineColor: Cesium.Color.BLUE,
                  // 垂直位置
                  // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  // 中心位置
                  pixelOffset: new Cesium.Cartesian2(0, -22)
                }
              } else {
                // r.billboard = {
                //   image: canvas.toDataURL(),
                //   color: Cesium.Color.CORNFLOWERBLUE,
                //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                //   // verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                // }
              }
            }
          }
        }
        that.mapViewer.scene.requestRender()
        // })

        // that.mapViewer.entities.add({
        //   id: '122222222222222',
        //   name: '立体标注',
        //   position: Cesium.Cartesian3.fromDegrees(114.025973657, 22.5460535462),
        //   // 点样式
        //   point: {
        //     pixelSize: 5,
        //     color: Cesium.Color.RED,
        //     outlineColor: Cesium.Color.BLUE,
        //     outlineWidth: 1
        //   },
        //   // 字体标签样式
        //   label: {
        //     text: '立体标注',
        //     font: '16pt',
        //     color: Cesium.Color.BLACK,
        //     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        //     outlineWidth: 2,
        //     // 垂直位置
        //     verticalOrigin: Cesium.VerticalOrigin.BUTTON,
        //     // 中心位置
        //     pixelOffset: new Cesium.Cartesian2(0, 0)
        //   }
        // })
        if (flyTo) {
          that.mapViewer.flyTo(promise)
        }
      })

      // this.mapViewer.screenSpaceEventHandler.setInputAction((movement) => {
      //   let pickedFeature = this.mapViewer.scene.pick(movement.position)
      //   console.log(pickedFeature)
      //   if (typeof (pickedFeature) !== 'undefined') // 鼠标是否点到线上
      //   {
      //     let name_id = pickedFeature.id.nameID // 获取每条线的nameID
      //     Hightlightline(name_id)
      //     console.log(name_id)
      //     // TODO:触发选中的事件
      //     this.$emit('data-click', pickedFeature)
      //   } else {
      //     // 如果没有选中任何线把高亮的线都去掉
      //     Highlight(currentHight, 10, 10)
      //   }
      // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    clear () {
      this.mapViewer.entities.removeAll()
      this.mapViewer.dataSources.removeAll()
    }
  }
}
</script>
<style scoped>
#cesiumContainer {
    /* position: absolute; */
    /* top: 40px; */
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    font-family: sans-serif;
}
</style>
<style>
.compass-outer-ring-background {
    border: 12px solid rgba(200,211,218,80%);
}

.compass-gyro-background {
    background-color: rgba(200,211,218,80%);
    border: 1px solid rgba(255,255,255,0.2);
}
.navigation-control {
    border-bottom: 1px solid #555555;
}
.navigation-controls {
    pointer-events: auto;
    border: 1px solid #226a9a;
    border-radius: 15px;
}
.navigation-controls > div:first-child {
    /* padding-top: 5px; */
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
}
.navigation-controls > div:last-child {
    /* padding-bottom: 5px; */
    border-bottom: none;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}
.navigation-controls > div {
    background-color: #2B87C4;
    cursor: pointer;
    border-bottom: 1px solid #226a9a;
}

.compass-outer-ring {
    fill: #fff;
    stroke: #404040;
}

.compass-outer-ring-background {
    border: 12px solid #c8d3da;;
}

.compass-gyro {
    fill: #fff;
}

.compass-gyro-background {
    background-color: #2B87C4;
    border: 2px solid #2B87C4;
}
</style>
